<template>
  <basic-container>
    <el-row >
      <el-col :span="4.8" class="col-item">
        <div class="col-item-title">待领取工单数</div>
        <el-tag type="info" effect="dark" ><span class="col-item-tag">20</span></el-tag>
      </el-col>
      <el-col :span="4.8" class="col-item">
        <div class="col-item-title">领取工单数</div>
        <el-tag type="danger" effect="dark" ><span class="col-item-tag">20</span></el-tag>
      </el-col>
      <el-col :span="4.8" class="col-item">
        <div class="col-item-title">完成工单数</div>
        <el-tag type="info" effect="dark" ><span class="col-item-tag">20</span></el-tag>
      </el-col>
      <el-col :span="4.8" class="col-item">
        <div class="col-item-title">待生产工单数</div>
        <el-tag type="success" effect="dark" ><span class="col-item-tag">20</span></el-tag>
      </el-col>
      <el-col :span="4.8" class="col-item">
        <div class="col-item-title">待生产商品总数</div>
        <el-tag type="warning" effect="dark" ><span class="col-item-tag">20</span></el-tag>
      </el-col>
    </el-row>
  </basic-container>

  <basic-container>
    <div class="rw">
      <div style="width: 80%">
        <el-descriptions :column="10" size="default"  direction="vertical" border>
          <el-descriptions-item label="生产工单编码">scgd2890263</el-descriptions-item>
          <el-descriptions-item label="商品编码">cp2890263</el-descriptions-item>
          <el-descriptions-item label="商品名称">汽车PCB板</el-descriptions-item>
          <el-descriptions-item label="规格型号">300x200</el-descriptions-item>
          <el-descriptions-item label="工单数量">500</el-descriptions-item>
          <el-descriptions-item label="已生产数量">300</el-descriptions-item>
          <el-descriptions-item label="合格数量">296</el-descriptions-item>
          <el-descriptions-item label="工单进度">59.2%</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="10" style="margin-top: 10px" size="default"  direction="vertical" border>
          <el-descriptions-item label="工艺名称">涂装工艺</el-descriptions-item>
          <el-descriptions-item label="绑夹具">323</el-descriptions-item>
          <el-descriptions-item label="翻版">316</el-descriptions-item>
          <el-descriptions-item label="清洁">306</el-descriptions-item>
          <el-descriptions-item label="点胶">300</el-descriptions-item>
          <el-descriptions-item label="烘烤">290</el-descriptions-item>
          <el-descriptions-item label="回传">280</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="rw-right">
        <div class="right-title">采集/输入数据</div>
        <el-input></el-input>
        <div class="jg">处理结果</div>
        <div class="jg-row">
          <div class="bg-gr"></div>
          <div class="bg-red"></div>
          <div class="bg-pick"></div>
        </div>
        <div class="jg-jj">
          OK 2024-09-13 17:28::36 1241950135!B44014303E
        </div>
      </div>
    </div>
  </basic-container>

  <basic-container>
    <h3 style=" line-height: 1; margin-block-start: 0;">采集工作台</h3>
    <avue-crud :data="data" :option="option" >
      <template #status="{ size, row, index }">
        <span :style="{color: row.status == 2? 'red': ''}">{{ row.$status }}</span>
      </template>
    </avue-crud>
  </basic-container>

</template>

<script>
import {ref} from "vue";

export default {
  name: "orders",
  setup(props){
    const data = ref([
      {
        serialNumber:'1241950135!B44014303E',
        ordersCode:'V614120 BJEV OP600 20231123',
        productCode:'V614120',
        fixturesCode:'Valeo Combo Gen 2.7 Main Board S02-001',
        time:'2024-09-13 17:28::36',
        status:1,
      },
      {
        serialNumber:'1241950135!B44014303E',
        ordersCode:'V614120 BJEV OP600 20231123',
        productCode:'V614120',
        fixturesCode:'Valeo Combo Gen 2.7 Main Board S02-001',
        time:'2024-09-13 17:28::36',
        status:2,
      }
    ]);
    const option = ref({
      menu: false,
      header:false,
      border: true,
      align: 'center',
      column:[
        {label: '序列号', prop: 'serialNumber'},
        {label: '生产工单', prop: 'ordersCode'},
        {label: '商品编码', prop: 'productCode'},
        {label: '治具二维码', prop: 'fixturesCode'},
        {label: '时间', prop: 'time'},
        {label: '状态', prop: 'status',
          type: 'select',
          dicData:[
            {label:'上传成功',value:1},
            {label:'上传失败',value:2},
          ],
          dataType: 'number',
        },

      ]

    });


    return{
      data,
      option
    }
  }
}
</script>

<style scoped lang="scss">
    .col-item{
      text-align: center;
      flex: 0 0 calc(4.1666666667% * 4.8);
      max-width: calc(4.1666666667% * 4.8);
      &-title{
        line-height: 32px;
        font-size: 16px;
      }
      &-tag{
        font-weight: bold;
        font-size: 18px;
      }
    }
    .rw{
      display: flex;
      align-items: center;
      justify-content: space-between;

      .rw-right{
        width: 20%;
        padding-left: 20px;
        //padding-right: 20px;
        .right-title{
          text-align: center;
          font-weight: bold;
        }
        .active-row{
          background: #9a6e3a;
          height: 32px;
          color:#ffffff;
          margin-top: 5px;
          border-radius: 5px;
          line-height: 32px;
          padding-left: 5px;
        }
        .jg{
          text-align: center;
          margin-top: 10px;
        }
        .jg-row{
          margin-top: 10px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
        .bg-gr{
          height: 20px;
          width: 30px;
          background: #00D00D;
        }
        .bg-red{
          height: 20px;
          width: 30px;
          background: red;
        }
        .bg-pick{
          height: 20px;
          width: 30px;
          background: #ec808d;
        }
        .jg-jj{
          padding: 2px 10px ;
          margin-top: 10px;
          background: #00D00D;
        }
      }

    }
</style>
